<template>
  <t-loading :loading="loading">
    <div class="bg-box news">
      <div class="item" v-for="(item, key) in data" :key="key" @click="onNews(item)">
        <div v-if="!key" class="on">
          <div class="title wrap">{{ item.title }}</div>
          <div class="time">{{ item.created_at.date() }}</div>
        </div>
        <t-row v-else>
          <t-col :span="7">
            <div class="title wrap flash">{{ item.title }}</div>
          </t-col>
          <t-col :span="4" :offset="1">
            <div class="time">{{ item.created_at.date() }}</div>
          </t-col>
        </t-row>
      </div>
    </div>
  </t-loading>
</template>

<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import { news } from '@/api/manage'
  
  const lang = app.lang.space('page.user.home')
  const data = ref([])
  
  const loading = ref(true)
  news().then(res => {
    data.value = res.data.map(item => {
      item.created_at = app.time.load(item.created_at)
      return item
    })
    loading.value = false
  })

  // 打开新闻
  const onNews = item => {
    app.alert({
      header: item.title,
      body: item.content,
      confirmBtn: {
        content: lang.t('news_btn')
      }
    }, hide => hide())
  }
</script>